<template>
	<view class="box">
		<view class="xian"></view>
		<view class="inp">
	{{$t('idSafe.forgetDealP.code')}}:	<input type="text" v-model="yzm" :placeholder="$t('idSafe.forgetDealP.inpCode')">
		<button class="send" @click="getyz">{{text}}</button>
			</view>
			
			<view class="jiange"></view>
			
		<view class="inps">
			{{$t('idSafe.changeLoginP.newP')}}:	<input type="password" v-model="newpass1" :placeholder="$t('idSafe.changeDealP.newP')">
		</view>
		<view class="xian"></view>
		<view class="inps">
			{{$t('idSafe.changeLoginP.sureNewP')}}:	<input type="password" v-model="newpass2" :placeholder="$t('idSafe.changeLoginP.inpSureNewP')">
		</view>
		<button type="default" class="sure" @click="sureChange">{{$t('idSafe.changeLoginP.sure')}}</button>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		data() {
			return {
				tel:'',
				yzm:'',
				newpass1:'',
				newpass2:'',
				yzmBtn:'获取验证码',
				token:'',
				shumatext: false,
				yanzhengnum: '',
				text: '获取验证码',
				time: '',
				disabled: false
			}
		},
		methods: {
			// 获取验证码
			getyz() {
				if (this.disabled) {
				    return;
				}					 
				this.disabled = true;
				this.setInterValFunc();
				},
				sureChange(){
					
					
					let {yzm,tel,newpass1,newpass2}=this;
					console.log(yzm,tel,newpass1,newpass2);
					if(yzm&&tel&&newpass1&&newpass2){
						if(newpass1.length>5&&newpass2.length>5){
							if(newpass1==newpass2){
								this.$api.sendRequest({									url: api.RESETPaywd,									data: {										mobile:tel,
										newpaypwd:newpass1,
										captcha:yzm									},									success: res => {										uni.showToast({
											title: res.msg,
											icon: 'none'
										})									}								});
							}else{
								uni.showToast({
									title: '两次密码不一样',
									icon: 'none'
								})
							}
						}else{
							uni.showToast({
								title: '密码长度不能小于6位',
								icon: 'none'
							})
						}
						
					}else{
						uni.showToast({
							title:'请补充完整信息',
							icon:'none'
						})
					}
				},
				setInterValFunc() {
					//倒计时
				    this.time = 60;
				    this.text = '秒后重新发送';
				    this.setTime = setInterval(() => {
				        if (this.time - 1 == 0) {
				            this.time = '';
				            this.text = '重新获取';
				            this.code = '';
				            this.disabled = false;
				            clearInterval(this.setTime);
				        } else {
				            this.time--;
				        }
				    }, 1000);
				},
		},
		
		created() {
			// uni.getStorage({
			// 	key:'token',
			// 	success:res=>{
			// 		console.log(res.data);
			// 		this.token=res.data
			// 	}
			// })
			// uni.getStorage({
			// 	key:'id',
			// 	success:res=>{
			// 		console.log(res.data);
			// 		this.tel=res.data
			// 	}
			// })
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped>
	.box{
		height: 100vh;
		/* width: 100vw; */
		background-color: #F3F3F3;
		font-size: 1em;
		position: relative;
	}
.inp{
	width: 94.6%;
	height: 100rpx;
	display: flex;
	background-color: #FFFFFF;
	line-height: 100rpx;
	/* margin-bottom: 40rpx; */
	padding-left: 40rpx;
	font-size: .7em;
}
.xian{
	width: 94.6%;
	height: 3rpx;
}
.inps{
	width: 100%;
	height: 100rpx;
	display: flex;
	padding-left: 40rpx;
	background-color: #FFFFFF;
	line-height: 100rpx;
	margin-bottom: 4rpx;
	font-size: .8em;
}
.jiange{
	width: 100%;
	height: 40rpx;
}
input{
	width: 450rpx;
	height: 100rpx;
	padding-left: 40rpx;
	color: #000000;
}
.send{
		width: 34%;
		border-radius: 32rpx;
		margin-top: 20rpx;
		margin-left: -100rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: .7em;
	/* 	background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
		    background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); */
		   /* background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
		    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); */
		    background: linear-gradient(to right, #3D54EA 10%,#7593FF 70%);
			color: #FFFFFF;
	}
.sure{
	width: 90%;
	margin: auto;
	position: absolute;
	background-color: #006bef;
	color: #FFFFFF;
	bottom: 4vh;
	left: calc(50% - 45%);
	}
</style>


